<template>
	<!-- 部门管理 -->
	<div class="heightMax order flexPublic" v-loading='tableLoding'>
		<div class="roleTopBox">
			<el-row>
				<el-button size="mini" class='fr' @click='goBack'>返回</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" class='fr' :disabled="isDisabled" @click='deleteList'>删除</el-button>
				<el-button type="primary" icon="el-icon-edit" size="mini" class='fr' :disabled="isDisabled" @click='compileRole'>编辑</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" class='fr' @click='addRole'>新增</el-button>
			</el-row>
		</div>
		<div class="roleBottomBox">
			<div class="listName">
				<i></i><span class="font14">组织架构列表</span>
			</div>
			<div class="tableBox">
				<vueScroll>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @selection-change="selectChange"
					 style="width: 100%" border header-row-class-name='tableHeader' default-expand-all row-key="id" :tree-props="{children: 'list', hasChildren: 'haslist'}">
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="组织架构名称" min-width="150">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
									<span class="speSpan">{{scope.row.name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="排序" property="username">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.serial_num ? scope.row.serial_num.toString() : ''"
								 placement="top">
									<span class="speSpan">{{scope.row.serial_num}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span class="eleBlueColor font13 cursor" @click="roleDetail(scope.row.id)">数据权限</span>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<!-- <div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div> -->
				</vueScroll>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
	} from "@/common.js";
	export default {
		mounted() {
			this.getTableList()
		},
		data() {
			return {
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
				isDisabled: true,
				tableLoding: false,
				checkArr: [],
			}
		},
		computed: {
			organizationId() {
				if (localStorage.frameworkId) {
					return JSON.parse(localStorage.frameworkId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			goBack() {
				let obj = {
					name: '单位管理',
					router: '/MainView/SystemManagement/InstitutionalFramework'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			//获取列表数据
			getTableList() {
				this.tableLoding = true
				let params = {
					company: this.organizationId,
					flag: ''
				}
				axiosGet('/user/organization/organize/', params, (res) => {
					this.tableLoding = false
					if (res.code == 0) {
						if (Object.keys(res.detail).length != 0) {
							this.tableData.push(res.detail)
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//删除
			deleteList() {
				this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = '/user/organization/organize/' + this.checkArr[0].id + '/'
					axiosDelete(url, {}, (res) => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功'
							})
							this.tableData = []
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {});
			},
			//单行点击
			rowClick(row, column) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			//多选变化
			selectChange(res) {
				this.checkArr = res
				if (res.length == 1) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
			},
			//每页数量变化
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			//页数变化
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			//新增部门
			addRole() {
				let obj = {
					newLabel: '新增部门',
					index: '/MainView/SystemManagement/AddDivisionalManagement'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'AddDivisionalManagement'
				})
			},
			//编辑部门
			compileRole() {
				let id = this.checkArr[0].id
				localStorage.roleOperation = JSON.stringify({
					id: id
				})
				let obj = {
					newLabel: '编辑部门',
					index: '/MainView/SystemManagement/CompliedDivisionalManagement'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'CompliedDivisionalManagement'
				})
			},
			//选择授权电梯
			roleDetail(id) {
				console.log(id)
				localStorage.isUser = JSON.stringify({
					isTrue: 21
				})
				let obj = {
					newLabel: '电梯授权',
					index: '/MainView/SystemManagement/ChoseAuthorizedElevator'
				}
				localStorage.roleOperation = JSON.stringify({
					id: id
				})
				// 				let obj = {
				// 					newLabel: '部门详情',
				// 					index: '/MainView/SystemManagement/DivisionalManagementDetail'
				// 				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'ChoseAuthorizedElevator'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		width: 100%;
		margin-bottom: 0 !important;
	}

	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}
	}
</style>
